<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>邻里社区 - 温暖大家庭</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        :root {
            --primary: #3A7BFF;
            --primary-light: #E8F0FF;
            --accent: #FF7D45;
            --success: #4CAF50;
            --warning: #FFC107;
            --text-dark: #333333;
            --text-medium: #666666;
            --text-light: #999999;
            --background: #FAFAFA;
            --card-bg: #FFFFFF;
            --border-radius: 16px;
            --shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Comic Sans MS', 'Marker Felt', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; }
        body { 
            background-color: var(--background); 
            color: var(--text-dark); 
            line-height: 1.6; 
            max-width: 500px; 
            margin: 0 auto; 
            padding: 0 15px 80px; 
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23e0e0e0' fill-opacity='0.2' fill-rule='evenodd'/%3E%3C/svg%3E");
        }
        
        /* 头部设计 */
        .header { 
            background: linear-gradient(135deg, var(--primary), #5A91FF); 
            color: white; 
            padding: 18px 15px; 
            border-radius: 0 0 30px 30px; 
            margin-bottom: 25px; 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            box-shadow: 0 8px 24px rgba(58, 123, 255, 0.25); 
            position: relative;
            overflow: hidden;
        }
        .header::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 120px;
            height: 120px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.2' d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
            transform: rotate(15deg) translate(20px, -40px);
        }
        .logo { 
            font-size: 1.6rem; 
            font-weight: bold; 
            display: flex; 
            align-items: center; 
            position: relative;
            z-index: 2;
        }
        .logo i { 
            margin-right: 10px; 
            font-size: 1.8rem;
            animation: pulse 2s infinite;
        }
        .header-icons { 
            display: flex; 
            gap: 20px; 
            font-size: 1.4rem; 
            position: relative;
            z-index: 2;
        }
        .header-icons i {
            transition: var(--transition);
        }
        .header-icons i:hover {
            transform: scale(1.15);
        }
        
        /* 社区公告 */
        .community-bulletin {
            background-color: var(--warning);
            color: #333;
            padding: 12px 15px;
            border-radius: 12px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 500;
            box-shadow: 0 4px 12px rgba(255, 193, 7, 0.2);
        }
        .community-bulletin i {
            color: #D32F2F;
        }
        
        /* 搜索栏 */
        .search-bar { 
            background-color: var(--card-bg); 
            border-radius: 30px; 
            padding: 14px 20px; 
            margin: 0 0 25px; 
            display: flex; 
            align-items: center; 
            box-shadow: var(--shadow);
            transition: var(--transition);
        }
        .search-bar:focus-within {
            box-shadow: 0 10px 25px rgba(58, 123, 255, 0.15);
            transform: translateY(-2px);
        }
        .search-bar i { 
            color: var(--primary); 
            margin-right: 12px; 
            font-size: 1.2rem;
        }
        .search-bar input { 
            border: none; 
            outline: none; 
            width: 100%; 
            font-size: 1.05rem;
            background: transparent;
        }
        
        /* 快速操作 */
        .quick-actions {
            display: flex;
            justify-content: space-between;
            margin-bottom: 25px;
            gap: 10px;
        }
        .quick-action-btn {
            flex: 1;
            background-color: var(--card-bg);
            border-radius: 16px;
            padding: 15px 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow);
            cursor: pointer;
            transition: var(--transition);
        }
        .quick-action-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
        }
        .quick-action-btn i {
            font-size: 1.5rem;
            margin-bottom: 8px;
            color: var(--primary);
        }
        .quick-action-btn.help i {
            color: var(--accent);
        }
        .quick-action-btn.event i {
            color: var(--success);
        }
        .quick-action-btn.market i {
            color: var(--warning);
        }
        .quick-action-btn span {
            font-size: 0.9rem;
            font-weight: 500;
        }
        
        /* 标签导航 */
        .tab-nav { 
            display: flex; 
            background-color: var(--card-bg); 
            border-radius: 30px; 
            overflow: hidden; 
            margin-bottom: 25px; 
            box-shadow: var(--shadow);
            padding: 5px;
        }
        .tab-item { 
            flex: 1; 
            text-align: center; 
            padding: 14px 10px; 
            font-size: 0.95rem; 
            color: var(--text-medium); 
            cursor: pointer; 
            transition: var(--transition);
            border-radius: 25px;
            margin: 0 3px;
            font-weight: 500;
        }
        .tab-item.active { 
            color: white; 
            background-color: var(--primary);
            box-shadow: 0 4px 12px rgba(58, 123, 255, 0.3);
            transform: translateY(-2px);
        }
        
        /* 帖子卡片 */
        .post-card { 
            background-color: var(--card-bg); 
            border-radius: 20px; 
            padding: 20px; 
            margin-bottom: 20px; 
            box-shadow: var(--shadow);
            transition: var(--transition);
            border-top: 5px solid transparent;
        }
        .post-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        .post-card.hot {
            border-top-color: var(--accent);
        }
        .post-card.discussion {
            border-top-color: var(--primary);
        }
        .post-card.help {
            border-top-color: var(--success);
        }
        
        .post-header { 
            display: flex; 
            align-items: center; 
            margin-bottom: 15px; 
        }
        .post-avatar { 
            width: 45px; 
            height: 45px; 
            border-radius: 50%; 
            background-color: #f0f5ff; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            margin-right: 15px; 
            color: var(--primary);
            font-size: 1.2rem;
            border: 2px solid white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .post-user-info { 
            flex: 1; 
        }
        .post-user-name { 
            font-weight: 600; 
            font-size: 1.05rem;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .post-user-name .badge {
            background-color: var(--primary-light);
            color: var(--primary);
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 10px;
            font-weight: normal;
        }
        .post-time { 
            font-size: 0.85rem; 
            color: var(--text-light); 
        }
        .post-title { 
            font-weight: 700; 
            margin-bottom: 10px; 
            font-size: 1.15rem;
            color: var(--text-dark);
        }
        .post-content { 
            color: var(--text-medium); 
            margin-bottom: 15px; 
            line-height: 1.6;
            font-size: 1.02rem;
        }
        .post-footer { 
            display: flex; 
            justify-content: space-between; 
            color: var(--text-light); 
            font-size: 0.95rem; 
            padding-top: 10px;
            border-top: 1px solid #f5f5f5;
        }
        .post-action { 
            display: flex; 
            align-items: center; 
            gap: 8px; 
            cursor: pointer; 
            transition: var(--transition);
            padding: 5px 10px;
            border-radius: 20px;
        }
        .post-action:hover {
            background-color: #f5f5f5;
        }
        .post-action i {
            transition: var(--transition);
        }
        .post-action.like:hover i {
            color: #F44336;
            transform: scale(1.2);
        }
        .post-action.comment:hover i {
            color: var(--primary);
            transform: scale(1.2);
        }
        .post-action.share:hover i {
            color: var(--success);
            transform: scale(1.2);
        }
        
        /* 邻里之星 */
        .neighbor-stars {
            background-color: var(--card-bg);
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 25px;
            box-shadow: var(--shadow);
        }
        .section-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .section-title i {
            color: var(--warning);
        }
        .stars-list {
            display: flex;
            gap: 15px;
            overflow-x: auto;
            padding-bottom: 10px;
        }
        .star-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 80px;
        }
        .star-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: #f0f5ff;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            color: var(--primary);
            font-size: 1.5rem;
            border: 3px solid #f0f5ff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .star-name {
            font-weight: 500;
            font-size: 0.9rem;
            text-align: center;
        }
        .star-badge {
            background-color: var(--primary-light);
            color: var(--primary);
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 10px;
            margin-top: 3px;
        }
        
        /* 底部导航 */
        .bottom-nav { 
            position: fixed; 
            bottom: 0; 
            left: 0; 
            right: 0; 
            background-color: var(--card-bg); 
            display: flex; 
            justify-content: space-around; 
            padding: 15px 0 10px; 
            box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05); 
            max-width: 500px; 
            margin: 0 auto; 
            z-index: 1000; 
            border-radius: 25px 25px 0 0;
        }
        .nav-item { 
            text-align: center; 
            color: var(--text-light); 
            text-decoration: none; 
            font-size: 0.85rem; 
            transition: var(--transition);
            position: relative;
            padding: 5px 10px;
            border-radius: 20px;
        }
        .nav-item.active { 
            color: var(--primary);
            background-color: rgba(58, 123, 255, 0.1);
        }
        .nav-item i { 
            font-size: 1.4rem; 
            display: block; 
            margin-bottom: 5px; 
        }
        .nav-item .notification-badge {
            position: absolute;
            top: -5px;
            right: 5px;
            background-color: var(--accent);
            color: white;
            font-size: 0.7rem;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        
        /* 发布按钮 */
        .publish-btn { 
            position: relative; 
        }
        .publish-btn .nav-item { 
            width: 60px; 
            height: 60px; 
            border-radius: 50%; 
            background: linear-gradient(135deg, var(--primary), #5A91FF); 
            color: white; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            margin-top: -25px; 
            box-shadow: 0 6px 16px rgba(58, 123, 255, 0.4);
            transition: var(--transition);
        }
        .publish-btn .nav-item:hover {
            transform: scale(1.1) rotate(5deg);
            box-shadow: 0 8px 20px rgba(58, 123, 255, 0.5);
        }
        .publish-btn .nav-item i { 
            margin: 0; 
            font-size: 1.8rem; 
        }
        
        /* 标签内容 */
        .tab-content { 
            display: none; 
        }
        .tab-content.active { 
            display: block; 
            animation: fadeIn 0.5s ease;
        }
        
        /* 加载更多 */
        .load-more { 
            text-align: center; 
            margin: 25px 0 15px; 
        }
        .load-more-btn { 
            background-color: var(--card-bg); 
            border: none; 
            border-radius: 30px; 
            padding: 12px 30px; 
            color: var(--primary); 
            cursor: pointer; 
            transition: var(--transition);
            font-weight: 600;
            box-shadow: var(--shadow);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin: 0 auto;
        }
        .load-more-btn:hover { 
            background-color: var(--primary);
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 8px 16px rgba(58, 123, 255, 0.3);
        }
        
        /* 动画 */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 响应式调整 */
        @media (max-width: 375px) {
            .quick-action-btn span {
                font-size: 0.8rem;
            }
            .tab-item {
                font-size: 0.9rem;
                padding: 12px 5px;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo"><i class="fas fa-hands-helping"></i> 邻里社区</div>
        <div class="header-icons">
            <i class="far fa-bell"></i>
            <i class="far fa-user-circle"></i>
        </div>
    </div>
    
    <div class="community-bulletin">
        <i class="fas fa-bullhorn"></i>
        <span>【社区通知】本周五下午3点将进行电梯维护，请居民提前做好准备</span>
    </div>
    
    <div class="search-bar">
        <i class="fas fa-search"></i>
        <input type="text" placeholder="寻找邻居、话题或帮助...">
    </div>
    
    <div class="quick-actions">
        <div class="quick-action-btn help">
            <i class="fas fa-hands-helping"></i>
            <span>求助</span>
        </div>
        <div class="quick-action-btn event">
            <i class="fas fa-calendar-alt"></i>
            <span>活动</span>
        </div>
        <div class="quick-action-btn market">
            <i class="fas fa-shopping-basket"></i>
            <span>邻里集市</span>
        </div>
    </div>
    
    <div class="neighbor-stars">
        <div class="section-title"><i class="fas fa-star"></i> 邻里之星</div>
        <div class="stars-list">
            <div class="star-item">
                <div class="star-avatar"><i class="fas fa-user"></i></div>
                <div class="star-name">李阿姨</div>
                <div class="star-badge">热心肠</div>
            </div>
            <div class="star-item">
                <div class="star-avatar"><i class="fas fa-user"></i></div>
                <div class="star-name">王师傅</div>
                <div class="star-badge">修理达人</div>
            </div>
            <div class="star-item">
                <div class="star-avatar"><i class="fas fa-user"></i></div>
                <div class="star-name">张老师</div>
                <div class="star-badge">知识共享</div>
            </div>
            <div class="star-item">
                <div class="star-avatar"><i class="fas fa-user"></i></div>
                <div class="star-name">刘医生</div>
                <div class="star-badge">健康顾问</div>
            </div>
            <div class="star-item">
                <div class="star-avatar"><i class="fas fa-user"></i></div>
                <div class="star-name">赵大厨</div>
                <div class="star-badge">美食家</div>
            </div>
        </div>
    </div>
    
    <div class="tab-nav">
        <div class="tab-item active" data-tab="hot">热门</div>
        <div class="tab-item" data-tab="discussion">讨论</div>
        <div class="tab-item" data-tab="help">求助</div>
    </div>
    
    <!-- 热门内容 -->
    <div class="tab-content active" id="hot-content">
        <div class="post-card hot">
            <div class="post-header">
                <div class="post-avatar"><i class="fas fa-user"></i></div>
                <div class="post-user-info">
                    <div class="post-user-name">王先生 <span class="badge">社区达人</span></div>
                    <div class="post-time">3天前</div>
                </div>
            </div>
            <div class="post-title">周末组织篮球活动</div>
            <div class="post-content">本周六下午3点社区篮球场，有没有一起打球的？不论水平，重在参与！还准备了小零食和饮料，打完球可以一起聊聊天~</div>
            <div class="post-footer">
                <div class="post-action like"><i class="far fa-heart"></i> <span>32</span></div>
                <div class="post-action comment"><i class="far fa-comment-dots"></i> <span>12</span></div>
                <div class="post-action share"><i class="far fa-share-alt"></i> <span>7</span></div>
            </div>
        </div>
        
        <div class="post-card discussion">
            <div class="post-header">
                <div class="post-avatar"><i class="fas fa-user"></i></div>
                <div class="post-user-info">
                    <div class="post-user-name">钱女士</div>
                    <div class="post-time">5小时前</div>
                </div>
            </div>
            <div class="post-title">社区读书会招募</div>
            <div class="post-content">想组织一个社区读书会，每月一次，第一次我们读《你当像鸟飞往你的山》，有兴趣的邻居可以报名参加。地点就在社区活动中心，有茶点哦~</div>
            <div class="post-footer">
                <div class="post-action like"><i class="far fa-heart"></i> <span>24</span></div>
                <div class="post-action comment"><i class="far fa-comment-dots"></i> <span>11</span></div>
                <div class="post-action share"><i class="far fa-share-alt"></i> <span>6</span></div>
            </div>
        </div>
        
        <div class="post-card help">
            <div class="post-header">
                <div class="post-avatar"><i class="fas fa-user"></i></div>
                <div class="post-user-info">
                    <div class="post-user-name">孙阿姨</div>
                    <div class="post-time">3小时前</div>
                </div>
            </div>
            <div class="post-title">猫咪走丢了</div>
            <div class="post-content">我家橘猫今天上午从窗户跑出去了，有邻居看到吗？叫"橘子"，很温顺，脖子上有蓝色项圈。如果看到请联系我，必有重谢！🙏🙏🙏</div>
            <div class="post-footer">
                <div class="post-action like"><i class="far fa-heart"></i> <span>28</span></div>
                <div class="post-action comment"><i class="far fa-comment-dots"></i> <span>9</span></div>
                <div class="post-action share"><i class="far fa-share-alt"></i> <span>3</span></div>
            </div>
        </div>
        
        <div class="load-more">
            <button class="load-more-btn"><i class="fas fa-sync-alt"></i> 加载更多邻里故事</button>
        </div>
    </div>
    
    <!-- 讨论内容 -->
    <div class="tab-content" id="discussion-content">
        <div class="post-card discussion">
            <div class="post-header">
                <div class="post-avatar"><i class="fas fa-user"></i></div>
                <div class="post-user-info">
                    <div class="post-user-name">李阿姨 <span class="badge">热心肠</span></div>
                    <div class="post-time">昨天</div>
                </div>
            </div>
            <div class="post-title">寻找数学家教</div>
            <div class="post-content">孩子初三，数学需要辅导，每周两次，有偿，可支付积分或现金。最好是大学生或有经验的老师，有耐心负责任。</div>
            <div class="post-footer">
                <div class="post-action like"><i class="far fa-heart"></i> <span>8</span></div>
                <div class="post-action comment"><i class="far fa-comment-dots"></i> <span>15</span></div>
                <div class="post-action share"><i class="far fa-share-alt"></i> <span>2</span></div>
            </div>
        </div>
        
        <div class="post-card discussion">
            <div class="post-header">
                <div class="post-avatar"><i class="fas fa-user"></i></div>
                <div class="post-user-info">
                    <div class="post-user-name">赵老师</div>
                    <div class="post-time">1小时前</div>
                </div>
            </div>
            <div class="post-title">关于小区垃圾分类的建议</div>
            <div class="post-content">最近发现小区垃圾分类执行得不太好，我有个提议：我们可以组织"垃圾分类小能手"活动，让孩子们参与监督，给表现好的家庭发小奖品，大家觉得怎么样？</div>
            <div class="post-footer">
                <div class="post-action like"><i class="far fa-heart"></i> <span>18</span></div>
                <div class="post-action comment"><i class="far fa-comment-dots"></i> <span>7</span></div>
                <div class="post-action share"><i class="far fa-share-alt"></i> <span>4</span></div>
            </div>
        </div>
        
        <div class="load-more">
            <button class="load-more-btn"><i class="fas fa-sync-alt"></i> 查看更多讨论</button>
        </div>
    </div>
    
    <!-- 求助内容 -->
    <div class="tab-content" id="help-content">
        <div class="post-card help">
            <div class="post-header">
                <div class="post-avatar"><i class="fas fa-user"></i></div>
                <div class="post-user-info">
                    <div class="post-user-name">张邻居</div>
                    <div class="post-time">2小时前</div>
                </div>
            </div>
            <div class="post-title">急需一个电钻挂画</div>
            <div class="post-content">客厅需要挂几幅画，谁家有电钻可以借用一下？大概需要1小时左右。我住在3号楼2单元，有工具的邻居麻烦联系我，谢谢！</div>
            <div class="post-footer">
                <div class="post-action like"><i class="far fa-heart"></i> <span>12</span></div>
                <div class="post-action comment"><i class="far fa-comment-dots"></i> <span>5</span></div>
                <div class="post-action share"><i class="far fa-share-alt"></i> <span>3</span></div>
            </div>
        </div>
        
        <div class="post-card help">
            <div class="post-header">
                <div class="post-avatar"><i class="fas fa-user"></i></div>
                <div class="post-user-info">
                    <div class="post-user-name">周先生</div>
                    <div class="post-time">昨天</div>
                </div>
            </div>
            <div class="post-title">需要搬家帮忙</div>
            <div class="post-content">本周六需要搬家，从3号楼搬到5号楼，东西不多，主要是一些箱子和小家电。有没有邻居可以帮忙？有偿，管饭还送自己做的手工饼干！</div>
            <div class="post-footer">
                <div class="post-action like"><i class="far fa-heart"></i> <span>15</span></div>
                <div class="post-action comment"><i class="far fa-comment-dots"></i> <span>6</span></div>
                <div class="post-action share"><i class="far fa-share-alt"></i> <span>2</span></div>
            </div>
        </div>
        
        <div class="load-more">
            <button class="load-more-btn"><i class="fas fa-sync-alt"></i> 查看更多求助</button>
        </div>
    </div>
    
    <div class="bottom-nav">
        <a href="#" class="nav-item active">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-comments"></i>
            <span>消息</span>
            <span class="notification-badge">3</span>
        </a>
        <div class="publish-btn">
            <a href="#" class="nav-item">
                <i class="fas fa-plus"></i>
            </a>
        </div>
        <a href="#" class="nav-item">
            <i class="fas fa-shopping-bag"></i>
            <span>集市</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user-circle"></i>
            <span>我的</span>
        </a>
    </div>
    
    <script>
        // 标签切换功能
        document.querySelectorAll('.tab-item').forEach(item => {
            item.addEventListener('click', function() {
                // 更新标签激活状态
                document.querySelectorAll('.tab-item').forEach(tab => {
                    tab.classList.remove('active');
                });
                this.classList.add('active');
                
                // 显示对应内容
                const tabType = this.getAttribute('data-tab');
                document.querySelectorAll('.tab-content').forEach(content => {
                    content.classList.remove('active');
                });
                document.getElementById(tabType + '-content').classList.add('active');
                
                // 滚动到顶部
                window.scrollTo({top: 0, behavior: 'smooth'});
            });
        });
        
        // 交互效果
        document.querySelectorAll('.post-action').forEach(action => {
            action.addEventListener('click', function() {
                const icon = this.querySelector('i');
                if (icon.classList.contains('far')) {
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    // 数字增加
                    const countSpan = this.querySelector('span');
                    if (countSpan) {
                        countSpan.textContent = parseInt(countSpan.textContent) + 1;
                        
                        // 添加点赞动画
                        if (this.classList.contains('like')) {
                            icon.classList.add('animate__animated', 'animate__heartBeat');
                            setTimeout(() => {
                                icon.classList.remove('animate__animated', 'animate__heartBeat');
                            }, 1000);
                        }
                    }
                } else {
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    // 数字减少
                    const countSpan = this.querySelector('span');
                    if (countSpan) {
                        countSpan.textContent = parseInt(countSpan.textContent) - 1;
                    }
                }
            });
        });
        
        // 加载更多按钮
        document.querySelectorAll('.load-more-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const originalText = this.innerHTML;
                this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
                
                setTimeout(() => {
                    this.innerHTML = originalText;
                    alert('已加载更多邻里内容！');
                }, 1500);
            });
        });
        
        // 快速操作按钮
        document.querySelectorAll('.quick-action-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const actionName = this.querySelector('span').textContent;
                alert(`您点击了"${actionName}"功能，即将开发完成！`);
            });
        });
    </script>
</body>
</html>